import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import {Button, Card, Icon, notification, Table} from 'antd';
import {Column, Pie} from '@ant-design/charts';
import {lineQuery, query} from "./actions";
import FilterForm from "../../components/FilterForm";
import {DATE_FORMAT} from "../../lib/func";
import {tableProps} from "../../lib/ui";
import moment from "moment";
import {getLastFilter, saveLastFilter} from "../../lib/identity";

const LAST_FILTER = "businessAnalysis";

class BusinessAnalysis extends PureComponent {
    componentDidMount() {
        const {dispatch} = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        dispatch(query({...fields}));
        dispatch(lineQuery({}));
    }

    state = {
        createTimeRange: [moment().startOf('month'), moment().endOf('month')],
        createTimeRange2: [moment().startOf('month'), moment().endOf('month')],
        createTimeStart1: undefined,
        createTimeStart2: undefined,
        createTimeEnd1: undefined,
        createTimeEnd2: undefined
    };
    handleSearch = (values) => {
        const {dispatch} = this.props;
        let fields = values;
        this.setState({createTimeRange: values.createTimeRange});
        if (fields.createTimeRange && fields.createTimeRange.length > 1) {
            fields.createTimeStart = fields.createTimeRange[0].format(DATE_FORMAT);
            fields.createTimeEnd = fields.createTimeRange[1].format(DATE_FORMAT);
            this.setState({createTimeStart1: fields.createTimeStart, createTimeEnd1:fields.createTimeEnd});
            delete fields.createTimeRange;
        }
        saveLastFilter(LAST_FILTER, {...fields});
        dispatch(query({...fields}));
    };
    handleSearchLine = (values) => {
        const {dispatch} = this.props;
        let fields = values;
        this.setState({createTimeRange2: values.createTimeRange2});
        if (fields.createTimeRange2 && fields.createTimeRange2.length > 1) {
            fields.createTimeStart = fields.createTimeRange2[0].format(DATE_FORMAT);
            fields.createTimeEnd = fields.createTimeRange2[1].format(DATE_FORMAT);
            this.setState({createTimeStart2: fields.createTimeStart, createTimeEnd2:fields.createTimeEnd});
            delete fields.createTimeRange2;
        }
        saveLastFilter(LAST_FILTER, {...fields});
        dispatch(lineQuery({...values}));
    };

    handleExport = () => {
        document.getElementById("exportBusiness").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };
    handleLineExport = () => {
        document.getElementById("exportLine").submit();
        notification.success({
            message: '请等待文件导出'
        });
    };

    render() {
        const {
            businessData, lineData
        } = this.props;
        let fields = getLastFilter(LAST_FILTER);
        if (fields === null || fields === undefined) {
            fields = {};
        }
        //柱状图
        const bData = [];
        businessData.forEach(item => {
            bData.push({
                ...item
            });
        });
        const businessDataConfig = {
            title: {
                visible: true,
                text: '基础柱状图-图形标签位置',
            },
            forceFit: true,
            data: bData,
            padding: 'auto',
            xField: 'businessName',
            yField: 'count',
            meta: {
                businessName: {alias: '业务类型'},
                count: {alias: '订单总数'},
            },
            label: {
                visible: true,
                position: 'middle',
            }
        };
        const filterSchema = [
            {
                key: 'createTimeRange',
                field: 'createTimeRange',
                type: 'dateRangePicker',
                expandable: true,
                title: '发车日期',
                fieldOptions: {
                    initialValue: this.state.createTimeRange || fields.createTimeRange
                }
            }
        ];
        const filterSchema2 = [
            {
                key: 'createTimeRange2',
                field: 'createTimeRange2',
                type: 'dateRangePicker',
                expandable: true,
                title: '发车日期',
                fieldOptions: {
                    initialValue: this.state.createTimeRange2 || fields.createTimeRange2
                }
            }
        ];

        const columns = [
            {
                title: "业务类型",
                dataIndex: "businessName",
                width: "180px"
            }, {
                title: "订单总数",
                dataIndex: "count",
                width: "180px",
            }, {
                title: "",
                dataIndex: ""
            }
        ];

        const lineColumns = [
            {
                title: "线路",
                dataIndex: "line",
                width: "180px"
            }, {
                title: "总数",
                dataIndex: "count",
                width: "180px",
            }, {
                title: "",
                dataIndex: ""
            }
        ];

        const lineDataConfig = {
            appendPadding: 10,
            data: lineData,
            angleField: 'count',
            colorField: 'line',
            radius: 0.9,
            label: {
                type: 'inner',
                offset: '-30%',
                content: function content(_ref) {
                    var percent = _ref.percent;
                    return ''.concat((percent * 100).toFixed(0), '%');
                },
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                },
            },
            interactions: [{type: 'element-active'}],
        };

        return (
            <div>
                <div style={{width: "50%", float: 'left'}}>
                    <FilterForm schema={filterSchema} callback={this.handleSearch}/>
                    <Button onClick={this.handleExport}><Icon type="export"/>导 出</Button>
                    <div style={{padding: '10px'}}>
                        <Card title={"业务类型柱状图"} bordered={false} style={{height: "500px", width: "100%"}}>
                            <Column {...businessDataConfig} />
                        </Card>
                    </div>
                    <Card>
                        <Table
                            {...tableProps}
                            columns={columns}
                            dataSource={businessData}
                            pagination={false}
                        />
                    </Card>
                </div>
                <div style={{width: "50%", float: 'left'}}>
                    <FilterForm schema={filterSchema2} callback={this.handleSearchLine}/>
                    <Button onClick={this.handleLineExport}><Icon type="export"/>导 出</Button>
                    <div style={{padding: '10px'}}>
                        <Card title={"铁路业务占比"} bordered={false} style={{height: "500px", width: "100%"}}>
                            <Pie {...lineDataConfig} />
                        </Card>
                    </div>
                    <Card>
                        <Table
                            {...tableProps}
                            columns={lineColumns}
                            dataSource={lineData}
                            pagination={false}
                        />
                    </Card>
                </div>
                <form
                    id="exportBusiness"
                    method="post"
                    target="_blank"
                    action="/api/orderAnalysis/businessExport"
                >
                    <input
                        name="createDateStart"
                        type="hidden"
                        value={this.state.createDateStart1}
                    />
                    <input
                        name="createDateEnd"
                        type="hidden"
                        value={this.state.createDateEnd1}
                    />
                </form>
                <form
                    id="exportLine"
                    method="post"
                    target="_blank"
                    action="/api/orderAnalysis/lineExport"
                >
                    <input
                        name="createDateStart"
                        type="hidden"
                        value={this.state.createDateStart2}
                    />
                    <input
                        name="createDateEnd"
                        type="hidden"
                        value={this.state.createDateEnd2}
                    />
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.businessAnalysis
    };
};

export default connect(mapStateToProps)(BusinessAnalysis);
